<!DOCTYPE html>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="referrer" content="no-referrer">
    
        <title itemprop="name">
            
                Web移动端适配之映射关系与视口 |
                    
                        墨小蛙
        </title>
        
            <link rel="shortcut icon" href="/images/favicon.ico">
            
                <meta http-equiv="x-dns-prefetch-control" content="on">
                <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
                <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
                <link rel="stylesheet" id="saukra_css-css" href="/css/style.css" type="text/css" media="all">
                <link rel="stylesheet" href="/css/lib.min.css" media="all">
                <link rel="stylesheet" href="/css/font.css" media="all">
                <link rel="stylesheet" href="/css/insight.css" media="all">
                <link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
                <link rel="stylesheet" href="/css/zoom.css" media="all">
                <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
                <!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> -->
                <script>
                    /*Initial Variables*/
                    var mashiro_option = new Object();
                    var mashiro_global = new Object();
                    mashiro_option.NProgressON = true;
                    /* 
                     * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js
                     * 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧
                     */
                    mashiro_option.email_domain = "";
                    mashiro_option.email_name = "";
                    mashiro_option.cookie_version_control = "";
                    mashiro_option.qzone_autocomplete = false;
                    mashiro_option.site_name = "さくら荘その小蛙";
                    mashiro_option.author_name = "小蛙";
                    mashiro_option.site_url = "https://inksmallfrog.gitee.io/";
                    mashiro_option.v_appId = "t6whCN1b96a2XW5eN358hXOC-gzGzoHsz";
                    mashiro_option.v_appKey = "kigfqfKhjVJ0LsaGBKPCowxC";
                    mashiro_option.mathjax = "0";
                    mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/";
                    mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";

                    // mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";
                    // mashiro_option.float_player_on = true;

                    /*End of Initial Variables*/
                </script>
                <script type="text/javascript">
                    var bg = "https://cdn.jsdelivr.net/gh/inksmallfrog/cdn/img/covers_raw/thumb-1920-483919.jpg,https://cdn.jsdelivr.net/gh/inksmallfrog/cdn/img/covers_raw/thumb-1920-331320.jpg".split(",");
                    var bgindex = Math.floor(Math.random() * bg.length);
                    if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
                        alert('朋友，IE浏览器未适配哦~');
                    }
                </script>
                <style type="text/css">
                    .hljs-ln {
                        border-collapse: collapse
                    }
                    
                    .hljs-ln td {
                        padding: 0
                    }
                    
                    .hljs-ln-n:before {
                        content: attr(data-line-number)
                    }
                </style>
                <style type="text/css">
                .site-top .lower nav {
                        display: block !important;
                    }
                    
                    .author-profile i,
                    .post-like a,
                    .post-share .show-share,
                    .sub-text,
                    .we-info a,
                    span.sitename,
                    .post-more i:hover,
                    #pagination a:hover,
                    .post-content a:hover,
                    .float-content i:hover {
                        color: #FE9600
                    }
                    
                    .feature i,
                    .download,
                    .navigator i:hover,
                    .links ul li:before,
                    .ar-time i,
                    span.ar-circle,
                    .object,
                    .comment .comment-reply-link,
                    .siren-checkbox-radio:checked+.siren-checkbox-radioInput:after {
                        background: #FE9600
                    }
                    
                     ::-webkit-scrollbar-thumb {
                        background: #FE9600
                    }
                    
                    .download,
                    .navigator i:hover,
                    .link-title,
                    .links ul li:hover,
                    #pagination a:hover,
                    .comment-respond input[type='submit']:hover {
                        border-color: #FE9600
                    }
                    
                    .entry-content a:hover,
                    .site-info a:hover,
                    .comment h4 a,
                    #comments-navi a.prev,
                    #comments-navi a.next,
                    .comment h4 a:hover,
                    .site-top ul li a:hover,
                    .entry-title a:hover,
                    #archives-temp h3,
                    span.page-numbers.current,
                    .sorry li a:hover,
                    .site-title a:hover,
                    i.iconfont.js-toggle-search.iconsearch:hover,
                    .comment-respond input[type='submit']:hover {
                        color: #FE9600
                    }
                    
                    .comments .comments-main {
                        display: block !important;
                    }
                    
                    .comments .comments-hidden {
                        display: none !important;
                    }
                    
                    background-position:center center;
                    background-attachment:inherit;
                }
                </style>
</head></html>
<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
  <div class="scrollbar" id="bar">
  </div>
  <a href="#" class="cd-top faa-float animated"></a>
  <section id="main-container">
    <div class="headertop filter-dot">
  <div id="banner_wave_1"></div>
  <div id="banner_wave_2"></div>
  <figure id="centerbg" class="centerbg">
    <div class="focusinfo no-select">
      <div class="header-tou">
        <a href="https://inksmallfrog.gitee.io/">
          <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/avators/conan.jpg">
        </a>
      </div>
      <div class="header-info">
        <p>昨天是小兔子，今天是小鹿</p>
        <div class="top-social_v2">
          <li id="bg-pre">
            <img class="flipx" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
          
            
              
                <li>
                  <a href="http://github.com/inksmallfrog" target="_blank" class="social-github" title="github">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/github.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="http://weibo.com/inksmallfrog/profile?is_all=1" target="_blank" class="social-github" title="微博">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/sina.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://music.163.com/#/user/home?id=90248658" target="_blank" class="social-github" title="网易云">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/wangyiyun.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://www.zhihu.com/people/salieri-67/activities" target="_blank" class="social-github" title="知乎">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/zhihu.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="mailto:inksmallfrog@gmail.com" class="social-github" title="email">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/email.svg">
                  </a>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/qq.png">
                  </a>
                  <div class="wechatInner">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/qq.jpg">
                  </div>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/wechat.png">
                  </a>
                  <div class="wechatInner">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/wechat.jpg">
                  </div>
                </li>
              
            
          
          <li id="bg-next">
            <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
        </div>
      </div>
    </div>
  </figure>
  <div id="video-container" style="">
    <video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">
    </video>
    <div id="video-btn" class="loadvideo videolive">
    </div>
    <div id="video-add">
    </div>
    <div class="video-stu">
    </div>
  </div>
  <div class="headertop-down faa-float animated" onclick="headertop_down()">
    <span>
      <i class="fa fa-chevron-down" aria-hidden="true">
      </i>
    </span>
  </div>
</div>
    <div id="page" class="site wrapper">
      <header class="site-header no-select gizle sabit" role="banner">
  <div class="site-top">
    <div class="site-branding">
      <span class="site-title">
        <span class="logolink moe-mashiro">
          <a href="/">
            <span class="sakurasono">さくら荘その</span>
            <span class="shironeko">小蛙</span>
          </a>
        </span>
      </span>
    </div>
    <div class="searchbox search-form-submit">
      <i class="iconfont js-toggle-search iconsearch icon-search">
      </i>
    </div>
    <div id="show-nav" class="showNav mobile-fit">
      <div class="line line1">
      </div>
      <div class="line line2">
      </div>
      <div class="line line3">
      </div>
    </div>
    <div class="lower-cantiner">
      <div class="lower">
        <nav class="mobile-fit-control hide">
          <ul id="menu-new" class="menu">
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
                    首页
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
                    归档
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/技术/">
                          <i class="fa fa-code" aria-hidden="true"></i>
                          技术
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/生活/">
                          <i class="fa fa-file-text-o" aria-hidden="true"></i>
                          生活
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="javascript:;">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
                    清单
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/tags/悦读/">
                          <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                          书单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/bangumi/">
                          <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                          番组
                        </a>
                      </li>
                    
                      <li>
                        <a href="/music/">
                          <i class="fa fa-headphones" aria-hidden="true"></i>
                          歌单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/tags/图集/">
                          <i class="fa fa-photo" aria-hidden="true"></i>
                          图集
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/comment/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
                    留言板
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/links/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
                    友人帐
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
                    关于
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/about/">
                          <i class="fa fa-meetup" aria-hidden="true"></i>
                          我？
                        </a>
                      </li>
                    
                      <li>
                        <a href="/theme-sakura/">
                          <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                          主题
                        </a>
                      </li>
                    
                      <li>
                        <a href="/lab/">
                          <i class="fa fa-cogs" aria-hidden="true"></i>
                          Lab
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/atom.xml">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
                    RSS
                  </span>
                </a>
                
              </li>
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

      <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<div class="pattern-center-blank"></div>

  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/mobileAdaptation.jpg);" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/mobileAdaptation.jpg">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      Web移动端适配之映射关系与视口</h1>
      <p class="entry-census">
        <span>
          <a href="">
            <img src="">
          </a>
        </span>
        <span>
          <a href=""></a>
        </span>
        <span class="bull">
        ·</span>
        2017-4-17<span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
    </header>
  </div>

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        
        <div class="entry-content">
          <p>上一篇讨论移动端适配的时候列出了一些结论，在这里回顾一下其中最重要的几个也就是今天要讨论的几项内容：</p>
<ol>
<li>在移动端下，设备厂商&amp;浏览器厂商会为网页选定一个default_html_width作为默认html.width，并以此为基础建立“初始缩放”映射关系:default_html_width =&gt; device_width</li>
<li>html元素宽度的改变的根本原因在于html宽度的改变</li>
<li>移动端用户缩放时不会改变html.width，只会修改映射关系。</li>
</ol>
<p>不过在我们谈“初始缩放”之前，我们还是要回顾一下Web中涉及的所有映射关系。</p>
<a id="more"></a>
<h1 id="映射关系"><a href="#映射关系" class="headerlink" title="映射关系"></a>映射关系</h1><p>我们这篇文章还是只讨论横向方向的映射。</p>
<blockquote>
<p>记映射关系 a =&gt; b = 1 : x 代表a上每1个像素在b上显示为x个像素</p>
</blockquote>
<h2 id="PC端"><a href="#PC端" class="headerlink" title="PC端"></a>PC端</h2><ol>
<li>程序员为在CSS(绝对的或相对的)编写宽度信息</li>
<li>浏览器加载html，设置html.width=browser.width，设置映射关系html.width=&gt;browser.width = 1:1，并计算html下的所有元素CSS属性</li>
<li>当浏览器窗口大小改变时，重新设置html.width为browser.width，并计算html下的所有元素CSS属性</li>
<li>当用户进行缩放时，重新设置html.width=browser.width / scaleRatio，设置映射关系html.width=&gt;browser.width=1:scaleRatio，并计算html下的所有元素CSS属性</li>
</ol>
<p>涉及到的映射关系：</p>
<ol>
<li>未缩放时html =&gt; browser = 1 : 1</li>
<li>缩放时html =&gt; browser = 1 : scaleRatio</li>
</ol>
<h2 id="移动端"><a href="#移动端" class="headerlink" title="移动端"></a>移动端</h2><p>browser.width === device.width 恒成立</p>
<ol>
<li>程序员为html中的各元素编写CSS(绝对的或相对的)</li>
<li>浏览器加载html，设置html.width为default_html_width，设置映射关系html.width=&gt;browser.width = 1 : device.width / default_html_width，并计算html下的所有元素CSS属性</li>
<li>当用户进行缩放时，设置映射关系(html.width / scaleRatio) =&gt; browser.width = 1 : device.width * scaleRatio / default_html_width</li>
</ol>
<p>涉及到的映射关系：</p>
<ol>
<li>未缩放时html =&gt; browser = html.width=&gt;browser.width = 1 : device.width / default_html_width</li>
<li>缩放时html =&gt; browser = 1 : device.width * scaleRatio / default_html_width</li>
</ol>
<p>总结映射关系：</p>
<blockquote>
<p>PC端：<br>未缩放时html =&gt; browser = 1 : 1<br>缩放时html =&gt; browser = 1 : scaleRatio<br>移动端：<br>未缩放时html =&gt; browser = 1 : device.width / default_html_width<br>缩放时html =&gt; browser = 1 : device.width * scaleRatio / default_html_width</p>
</blockquote>
<p>上面的结论里，device.width是一个固定值，你的设备宽度不太可能忽大忽小，而default_html_width默认情况下，是由设备厂商&amp;浏览器厂商给定的某个固定值。</p>
<p>所以默认情况下device.width / default_html_width就是一个常数，我们先把它称作default-initial-scale。</p>
<p>那这么看来，default-initial-scale = 1的情况不就和PC端一样了么？是的，映射关系是一样的。但是如果我们改一下，把所有变量都列出来，就有区别了</p>
<blockquote>
<p>PC端：<br>未缩放时html =&gt; browser = html.width : html.width<br>缩放时html =&gt; browser = html.width : scaleRatio * html.width<br>移动端：<br>未缩放时html =&gt; browser = 1 : default-initial-scale<br>缩放时html =&gt; browser = 1 : scaleRatio * default-initial-scale</p>
</blockquote>
<p>PC端改变html大小的方法很多，但在移动端，缩放不会改变html大小，甚至大部分移动设备旋转屏幕也不会，（凡事都有例外，当屏幕旋转后超出default_html_width的时候会改变html的大小，因为这时候就相当于是PC端了（比如iPad））所以可以把它当做常量看。</p>
<p>不过当default-initial-scale=1的时候，确实会有很多帮助，但之前也说了，大部分设备中浏览器的default-initial-scale都不是1，所以设置这个“初始缩放”值就是整个移动端适配的核心。</p>
<h1 id="initial-scale"><a href="#initial-scale" class="headerlink" title="initial-scale"></a>initial-scale</h1><h2 id="它是计算谁的？"><a href="#它是计算谁的？" class="headerlink" title="它是计算谁的？"></a>它是计算谁的？</h2><p>不过你可能还没想清楚，把initial-scale设为1到底有什么好处。当然就相当于页面不会发生映射。如果你和我刚接触这个概念时的想法一样，那你可能会想问这么做岂不是很糟糕？如果不发生映射，一个980px的html在320px的屏幕上就会被分成3份多20px……那么用户就不得不使用讨厌的横向滚动条来查看页面的特定位置。</p>
<p>但是，这种理解方式的前提是，你认为default_html_width是不会发生改变的。但我们在上一篇讨论中说过，这个值只是厂商们选出的一个合适的默认值。嗯，默认的意思就是，如果你希望它改变，它还是可以变化的。</p>
<p>所以说这个initial-scale，是在device.width固定的情况下，用来<em>自己定义html_width的</em>。</p>
<p>所以你把initial-scale设为1，就是说你希望你的html_width和device.width一样大，这样的话你在CSS中定义的16px的文字，不管在怎样的设备中都实实在在的是16px，再也不会像上一篇中被映射成了蚂蚁大的5px。</p>
<h2 id="可是请等等，这里还有一个很严重的问题"><a href="#可是请等等，这里还有一个很严重的问题" class="headerlink" title="可是请等等，这里还有一个很严重的问题"></a>可是请等等，这里还有一个很严重的问题</h2><p>可是请等等，这里还有一个很严重的问题……我们在上一篇讨论过，实际的像素是多大其实没什么意义，用户更在意物理上的距离，也就是用cm度量的那种距离……到底有多长？</p>
<p>我还是取来上一次说的设备A和B</p>
<blockquote>
<p>A设备：<br>物理尺寸：10cm * 20cm<br>像素： 320cm * 640cm<br>像素密度： 32px/cm</p>
<p>B设备：<br>物理尺寸：10cm * 20cm<br>像素： 640cm * 1280cm<br>像素密度： 64px/cm</p>
</blockquote>
<p>如果按照上面的计算规则，在我们把initial-scale都设为1的情况下，对于一个16px的文字</p>
<blockquote>
<p>A设备：<br>映射关系： 320 =&gt; 320<br>实际像素： x / 16 = 320 / 320 =&gt; x = 16px<br>实际长度： l = 16px / 32(px/cm) = 0.5cm</p>
<p>B设备：<br>映射关系： 640 =&gt; 640<br>实际像素： x / 16 = 640 / 640 =&gt; x = 16px<br>实际长度： l = 16 / 64 = 0.25cm</p>
</blockquote>
<p>这下问题就严重了，同样10cm宽的设备上，为了保证initial-scale为1结果产生了差异。那我们是不是应该针对B设备重设一个initial-scale，比如设为2.0？可是这样不就意味着我们必须针对每个设备不同的像素密度以及设备宽度来设置initial-scale么？这……已经可以弃疗了</p>
<h1 id="DPR"><a href="#DPR" class="headerlink" title="DPR"></a>DPR</h1><p>为了不让艰辛的前端程序员们弃疗，设备厂商也很早就考虑好了这种问题。以苹果公司为早起代表提出了DPR(Device pixel ratio)这个专门为CSS准备的概念。</p>
<p>它是什么意思呢？</p>
<blockquote>
<p>设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值</p>
</blockquote>
<p>这个定义读起来……反正我读着很头疼，关键是因为缩放的定义说不清。所以我理解的时候做了一些修正。</p>
<p>按照我们上一篇讨论的结果，缩放的实质就是映射。那100%的缩放就是不缩放也就是不映射</p>
<p>不映射？根据我们对移动端映射情况的总结，就是说initial-scale=1 &amp;&amp; scaleRatio = 1。</p>
<p>所以我的定义就是</p>
<blockquote>
<p>DPR(devicePixelRatio)是无其它映射情况下，设备像素和CSS像素的比值</p>
</blockquote>
<p>为什么要多写其它两字？因为DPR本身也是种映射……比如说在无其他映射的情况下，一个16px的文字，在DPR=2的设备上，就会被映射成2个实际的设备像素。</p>
<p>那有映射情况下的计算就是简单的数学比例关系的问题。</p>
<p>我们修改一下我们的映射关系</p>
<blockquote>
<p>移动端：<br>未缩放时html =&gt; browser = 1 : device.width / (default_html_width * DPR)<br>缩放时html =&gt; browser = 1 : device.width * scaleRatio / (default_html_width * DPR)</p>
</blockquote>
<p>好了，这样子就完美了。我们再重新看这个东西，device.width是常量，DPR呢？我们说这个是由设备厂家给出的定值，比如苹果厂家为iphone5设计的DPR=2，而default_html_width也是常量。</p>
<p>那么我们可以重新定义default-initial-scale = device.width / (default_html_width * DPR);</p>
<blockquote>
<p>移动端：<br>未缩放时html =&gt; browser = 1 : default-initial-scale<br>缩放时html =&gt; browser = 1 : scaleRatio * default-initial-scale</p>
</blockquote>
<p>这时候我们看起来又回到了原始的位置……但其实我们再次尝试设置initial-scale的时候</p>
<h1 id="全新的initial-scale"><a href="#全新的initial-scale" class="headerlink" title="全新的initial-scale"></a>全新的initial-scale</h1><p>因为device.width / (default_html_width * DPR)中的device.width，DPR是绝对不会变的，只有html_width有商量的余地。</p>
<p>所以当你修改initial-scale的时候，仍然只会影响html_width的值。</p>
<blockquote>
<p>html_width = device.width / (DPR * initial-scale)</p>
</blockquote>
<p>继续来看设备A和B，这次设备厂家给我们提供了新数据</p>
<blockquote>
<p>A设备：<br>物理尺寸：10cm * 20cm<br>像素： 320cm * 640cm<br>像素密度： 32px/cm<br>DPR：1</p>
<p>B设备：<br>物理尺寸：10cm * 20cm<br>像素： 640cm * 1280cm<br>像素密度： 64px/cm<br>DPR：2</p>
</blockquote>
<p>如果按照上面的计算规则，在我们把initial-scale都设为1的情况下，对于一个16px的文字</p>
<blockquote>
<p>A设备：<br>html_width = 320 / (1 * 1) = 320<br>映射关系： 320 =&gt; 320<br>实际像素： x / 16 = 320 / 320 =&gt; x = 16px<br>实际长度： l = 16px / 32(px/cm) = 0.5cm</p>
<p>B设备：<br>html_width = 640 / (1 * 2) = 320<br>映射关系： 320 =&gt; 640<br>实际像素： x / 16 = 640 / 320 =&gt; x = 32px<br>实际长度： l = 32 / 64 = 0.5cm</p>
</blockquote>
<p>欢呼吧，只要设备厂家给定了合适的DPR的值，你的initial-scale=1就可以正常工作了！</p>
<h1 id="这些思路我理解了，可是……这种技术就叫做……initial-scale技术么？"><a href="#这些思路我理解了，可是……这种技术就叫做……initial-scale技术么？" class="headerlink" title="这些思路我理解了，可是……这种技术就叫做……initial-scale技术么？"></a>这些思路我理解了，可是……这种技术就叫做……initial-scale技术么？</h1><p>如果你学过面向对象程序设计，也知道那些设计模式，你就该知道一个合理的名字对于技术交流有多么重要。</p>
<p>不过一个东西有了名字也是个麻烦事，因为我们都遇到过两个人对同一个名词有着完全不同的理解的情况。</p>
<p>所以说无论是我上面自己扯出来的映射，还是各种大神们说的缩放，有些意义上是相同的有些则有一点点区别，不存在名字上好不好的问题，只有对你好不好理解的问题。所以……</p>
<blockquote>
<p>你理解就好</p>
</blockquote>
<p>就比如说这个“初始缩放”我一直认为它应该只是个映射而不该当成（我理解的）缩放……即便缩放本质上就是映射……</p>
<p>现在，我们在理解这些原理的基础上，看一看标准化，或者说一些已经成文的东西。</p>
<h2 id="lt-meta-name-”viewport”-gt"><a href="#lt-meta-name-”viewport”-gt" class="headerlink" title="&lt;meta name=”viewport”&gt;"></a>&lt;meta name=”viewport”&gt;</h2><p>这个标签最早是苹果提出来的，为的就是能在移动端设置html_width。<br>我们可以在html的head中写如下语句</p>
<pre><code class="html">    &lt;meta name=&quot;viewport&quot; content=&quot;width=400&quot;&gt;
</code></pre>
<p>意思就是让html_width=400px，不过这种设置方法……不会影响到initial-scale。说的清楚一点就是……你如果这么写，你的initial-scale = default-initial-scale = device.width / (default_html_width * DPR)，而不是你期待的device.width / (400 * DPR)。</p>
<p>如果你希望修改initial-scale</p>
<pre><code class="html">    &lt;meta name=&quot;viewport&quot; content=&quot;width=400, initial-scale=1&quot;&gt;
</code></pre>
<p>还记得我们刚提到initial-scale时，我们（好吧，至少是我）的错误理解么？现在我们就得到了这种效果……一个html_width固定为400px的html被1:1映射到了屏幕上……所以说，对于DPR映射后320px的设备，你每次只能看见html的80%。</p>
<p>不过你愿意思考的话可以想想在DPR映射后320px的设备上</p>
<pre><code class="html">    &lt;meta name=&quot;viewport&quot; content=&quot;width=200, initial-scale=1&quot;&gt;
</code></pre>
<p>会发生什么？留白吗？也有可能是黑边？还是说？……留个悬念自己用Chrome测试一下吧</p>
<p>当然你也可以只写initial-scale</p>
<pre><code class="html">    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1&quot;&gt;
</code></pre>
<p>哈，这就是我们正确理解的initial-scale，这种设置会计算出html_width=device.width，我们也可以把它设置成其它数字检验一下我们的理解是否正确。</p>
<p>不过你可能最喜欢的写法是这样</p>
<pre><code class="html">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
</code></pre>
<p>因为这是兼容性最好的方案（兼容了IE10转为横屏时按照initial-scale=1不能铺满屏的问题orz）</p>
<h1 id="三类Viewport"><a href="#三类Viewport" class="headerlink" title="三类Viewport"></a>三类Viewport</h1><p><a href="http://www.w3cplus.com/css/viewports.html" target="_blank" rel="noopener">viewports剖析</a></p>

        </div>
        <!-- .entry-content -->
        <div class="single-reward">
          <div class="reward-open">赏
            <div class="reward-main">
              <ul class="reward-row">
                <li class="alipay-code"><img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/donate/AliPayQR.jpg"></li>
                <li class="wechat-code"><img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/donate/WeChanQR.jpg"></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
        <footer class="post-footer">
          <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
          <div class="post-tags">
          </div>
          <div class="post-share">
            <div class="social-share sharehidden share-component"></div>
            <i class="iconfont show-share icon-forward"></i>
          </div>
        </footer><!-- .entry-footer -->
      </article>
      <!-- #post-## -->
      <div class="toc" style="background: none;"></div>
      <section class="post-squares nextprev">
        
        
          
            <div class="post-nepre full next">
          
            <a href="/2017/04/16/JS模块化规范/" rel="next">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/module.jpg" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/module.jpg">
              </div>
              <span class="label">
              Next Post</span>
              <div class="info">
                <h3>
                JS模块化规范</h3>
                <hr>
              </div>
            </a>
          </div>
        
      </section>
      
<div id="vcomments"></div>
<script>
  window.onload = function(){
      var valine = new Valine();
      valine.init({
        el: '#vcomments',
        appId: "t6whCN1b96a2XW5eN358hXOC-gzGzoHsz",
        appKey: "kigfqfKhjVJ0LsaGBKPCowxC",
        path: window.location.pathname,
        placeholder: "你是我一生只会遇见一次的惊喜 ..."
      })
  }
</script>

      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <a href="" class="profile gravatar"><img src="" itemprop="image" alt="" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a href="" itemprop="url" rel="author"></a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i></p>
      </section>
    </main><!-- #main -->
  </div><!-- #primary -->
</div>



    </div>    
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="请输入关键词..."/>
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            // PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
    <!-- <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 墨小蛙<br>
      powered_by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer> -->
<footer id="colophon" class="site-footer" role="contentinfo">
  <div class="site-info">
    <div class="footertext">
      <div class="img-preload">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/wordpress-rotating-ball-o.svg">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg">
      </div>
      <p style="color: #666666;">&copy 2018</p>
    </div>
    <div class="footer-device">
    <p style="font-family: 'Ubuntu', sans-serif;">
        <span style="color: #b9b9b9;">Theme <a href="https://github.com/honjun/hexo-theme-sakura" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Sakura</a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> by <a href="https://2heng.xin/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Mashiro</a>&<a href="https://www.hojun.cn/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Hojun</a>, Powered by Hexo, Hosted by Coding Pages</a>
        </span>
      </p>
    </div>
  </div><!-- .site-info -->
</footer>



<!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/zoom.min.js"></script>
<script type="text/javascript" src="/js/sakura-app.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>
<script src="/js/botui.js"></script>
<!-- 不蒜子 网页计数器 -->
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
/* <![CDATA[ */
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"close"},"windowheight":"fixed","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
} else {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"open"},"windowheight":"auto","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
}
/* ]]> */

</script>
<script>
$(document).ready(function() {
  if ($(".toc").length > 0 && document.body.clientWidth > 1200) {
    if ($(".pattern-center").length > 0) { //有图的情况
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -400,
          scrollSmoothOffset: -85
      });
    } else {
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -85,
          scrollSmoothOffset: -85
      });
    }
    var offsetTop = $('.toc').offset().top - 95;
    window.onscroll = function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= offsetTop) {
        $('.toc').addClass('toc-fixed');
      } else {
        $('.toc').removeClass('toc-fixed');
      }
    }
  }
});
</script>

    <div class="openNav no-select" style="height: 50px;">
      <div class="iconflat no-select" style="width: 50px; height: 50px;">
        <div class="icon"></div>
      </div>
      <div class="site-branding search-form-submit">
        <i class="iconfont js-toggle-search iconsearch icon-search"></i>
      </div>
    </div>
  </section>
  <div id="mo-nav" class="">
  <div class="m-avatar">
    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/avators/conan.jpg">
  </div>
  <p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">さくら荘その小蛙</p>
  <p style="text-align: center; word-spacing: 20px;">
    
      
        <a href="http://github.com/inksmallfrog" class="fa fa-github" target="_blank" style="color: #333; margin-left:20px"></a>
      
        <a href="http://weibo.com/inksmallfrog?is_all=1" class="fa fa-weibo" target="_blank" style="color: #dd4b39; margin-left:20px"></a>
      
        <a href="https://wpa.qq.com/msgrd?v=3&uin=327720269&site=qq&menu=yes" class="fa fa-qq" target="_blank" style="color: #25c6fe; margin-left:20px"></a>
      
    
  </p>
  <ul id="menu-new-1" class="menu">
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
            首页
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
            归档
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/技术/">
                  <i class="fa fa-code" aria-hidden="true"></i>
                  技术
                </a>
              </li>
            
              <li>
                <a href="/categories/生活/">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                  生活
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="javascript:;">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
            清单
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/tags/悦读/">
                  <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                  书单
                </a>
              </li>
            
              <li>
                <a href="/bangumi/">
                  <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                  番组
                </a>
              </li>
            
              <li>
                <a href="/music/">
                  <i class="fa fa-headphones" aria-hidden="true"></i>
                  歌单
                </a>
              </li>
            
              <li>
                <a href="/tags/图集/">
                  <i class="fa fa-photo" aria-hidden="true"></i>
                  图集
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/comment/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
            留言板
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/links/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
            友人帐
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
            关于
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/about/">
                  <i class="fa fa-meetup" aria-hidden="true"></i>
                  我？
                </a>
              </li>
            
              <li>
                <a href="/theme-sakura/">
                  <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                  主题
                </a>
              </li>
            
              <li>
                <a href="/lab/">
                  <i class="fa fa-cogs" aria-hidden="true"></i>
                  Lab
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/atom.xml">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
            RSS
          </span>
        </a>
        
      </li>
    
  </ul>
  <p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2019 hexo-sakura</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<style>
  .aplayer .aplayer-lrc {
    height: 35px;
  }
  .aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
  }
  .aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
  }
  .aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
  }
  .aplayer .aplayer-lrc.aplayer-lrc-hide {
      display:none !important;
  }
  .aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
  }
</style>
<meting-js

    id="2660651585"

    server="netease"

    type="playlist"

    fixed="true"

    autoplay="false"

    loop="all"

    order="random"

    preload="auto"

    volume="0.7"

    mutex="true"

</meting-js>
<script>
  $(function(){
    $('body').on('click', '.aplayer', function(){
      if($('.aplayer-button').hasClass('aplayer-play')) {
        $('.aplayer-lrc').removeClass('lrc-show');
      } else {
        $('.aplayer-lrc').addClass('lrc-show');
      }
    })
  });
</script>
</body>
</html>